import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import request from '../../api/request'
import { Tabs } from 'antd-mobile'
import { JumboTabs } from 'antd-mobile'

function Index() {
    const ll = useNavigate()
    const back = useNavigate()
    let [kk] = useSearchParams()
    let start = kk.get('start')
    let end = kk.get('end')
    let [list, setList] = useState([])

    const getdata = async () => {
        const res = await request.get('/api/trip/airplane', {
            params: {
                start,
                end
            }
        })
        if (res.data.code == 200) {
            setList([...list, ...res.data.data])
        }
    }

    useEffect(() => {
        getdata()
    }, [])

    const tiao = (item) => {
        ll(`/xiang?start=${start}&end=${end}`, { state: item })
    }
    return (
        <div>
            <NavBar onBack={() => back(-1)}>
                {start}→{end}
            </NavBar>

            <Tabs>
                <Tabs.Tab title='前一天' key='fruits'>
                    <div>
                        {
                            list && list.map((item, index) => (
                                <div key={index} className='uu' onClick={() => tiao(item)}>
                                    <span>{item.dasn}</span>
                                    <span>{item.dst}</span>
                                    <span>{item.dt}</span>
                                    <span>{item.aasn}</span>
                                    <span>{item.aat}</span>
                                    <span>{item.ast}</span>
                                    <span>{item.at}</span>
                                    <span style={{ color: 'red' }}>￥{item.lps[0].atp}</span>
                                </div>
                            ))
                        }
                    </div>
                </Tabs.Tab>
                <Tabs.Tab title='05/13 周一' key='vegetables'>
                    <div>
                        {
                            list && list.map((item, index) => (
                                <div key={index} className='uu' onClick={() => tiao(item)}>
                                    <span>{item.dasn}</span>
                                    <span>{item.dst}</span>
                                    <span>{item.dt}</span>
                                    <span>{item.aasn}</span>
                                    <span>{item.aat}</span>
                                    <span>{item.ast}</span>
                                    <span>{item.at}</span>
                                    <span style={{ color: 'red' }}>￥{item.lps[0].atp}</span>
                                </div>
                            ))
                        }
                    </div>

                    <JumboTabs>
                        <JumboTabs.Tab title='筛选' key='fruits' />
                        <JumboTabs.Tab title='出发时间' key='vegetables' />
                        <JumboTabs.Tab
                            title='旅行耗时'
                            key='animals'
                            disabled
                        />
                    </JumboTabs>
                </Tabs.Tab>
                <Tabs.Tab title='后一天' key='animals'>
                    <div>
                        {
                            list && list.map((item, index) => (
                                <div key={index} className='uu' onClick={() => tiao(item)}>
                                    <span>{item.dasn}</span>
                                    <span>{item.dst}</span>
                                    <span>{item.dt}</span>
                                    <span>{item.aasn}</span>
                                    <span>{item.aat}</span>
                                    <span>{item.ast}</span>
                                    <span>{item.at}</span>
                                    <span style={{ color: 'red' }}>￥{item.lps[0].atp}</span>
                                </div>
                            ))
                        }
                    </div>
                </Tabs.Tab>
            </Tabs>




        </div>
    )
}

export default Index
